/*
 * AppGo使用的 图片查看插件
 * Author : lufeng@bingosoft.net
 * Version: 1.0.0
 * Date : 2015/11/17
 */
(function ($) {

  var windowMargin = 8; //加多边距的宽高，使得图片看起来有边框效果

  //图片查看器
  $.fn.extend({

    photoGallery: function (options) {

      var isFirefox = navigator.userAgent.indexOf("Firefox") > -1;
      var MOUSEWHEEL_EVENT = isFirefox ? "DOMMouseScroll" : "mousewheel";
      var defaults = {
        //图片缩放倍率
        ratio: 0.8,
        //右下角缩略图宽度
        thumbnailsWidth: 180,
        //右下角缩略图高度
        thumbnailsHeight: 120,
        //HTML模版
        template: {
          //操作工具
          OPERTATION: '<div class="oper">' +
            '<span class="prev"><i class="icon_tool-prev"></i></span>' +
            '<span class="next"><i class="icon_tool-next"></i></span>' +
            '</div>' +
            '<div class="tool">' +
            '<div class="toolct">' +
            '<span class="oper_fullscreen" title="查看全屏"><i class="icon_tool-fullscreen"></i></span>' +
            '<span class="oper_bigger" title="放大图片"><i class="icon_tool-bigger"></i></span>' +
            '<span class="oper_smaller" title="缩小图片"><i class="icon_tool-smaller"></i></span>' +
            '<span class="oper_rotate" title="向右旋转"><i class="icon_tool-rotate"></i></span>' +
            /*'<span class="oper_download" title="下载图片" ><i class="icon_tool-download"></i></span>' +*/
            '</div>' +
            '</div>',
          //缩略图
          THUMBNAILS: "<div class='thumbnails'>" +
            '<span class="thumbClose" title="关闭缩略图"><i class="icon_close-small"></i></span>' +
            '<img ondragstart="return false;"/>' +
            '<div class="thumbDrag"><span></span></div>' +
            "</div>",
          //大图
          IMAGE: '<img class="image" ondragstart="return false;"/>'
        }
      };

      var o = $.extend(defaults, options),
        $gallery = $(this);
      console.log(o);
      $gallery.append(o.template.OPERTATION).append(o.template.THUMBNAILS);

      var $tool = $(this).find(".tool"),
        $fullscreen = $(this).find(".oper_fullscreen"),
        $bigger = $(this).find(".oper_bigger"),
        $smaller = $(this).find(".oper_smaller"),
        $rotate = $(this).find(".oper_rotate"),
        $download = $(this).find(".oper_download"),
        $prev = $(this).find(".prev"),
        $next = $(this).find(".next"),
        $thumbnails = $(this).find(".thumbnails"),
        $image,
        $thumbImg,
        imageWidth,
        imageHeight,
        imgRatio,
        dragX,
        dragY,
        cW,
        cH,
        w, h, isVertical,
        thumbX,
        thumbY;

      //上一张
      $prev.on('click', function () {
        if (o.activeIndex > 0) o.activeIndex--;
        toggleImage();
      }).on("mouseover", function (e) {
        if (o.activeIndex > 0)
          $(this).addClass("active");
      }).on("mouseout", function (e) {
        $(this).removeClass("active");
      });

      //下一张
      $next.on('click', function () {
        if (o.activeIndex < o.imgs.length - 1) o.activeIndex++;
        toggleImage();
      }).on("mouseover", function (e) {
        if (o.activeIndex < o.imgs.length - 1)
          $(this).addClass("active");
      }).on("mouseout", function (e) {
        $(this).removeClass("active");
      });

      //缩略图
      $thumbnails.css({
        height: o.thumbnailsHeight,
        width: o.thumbnailsWidth
      }).on("mouseenter", function (e) {
        thumbX = -1;
      }).on("mousedown", function (e) {
        thumbX = e.pageX || e.clientX;
        thumbY = e.pageY || e.clientY;

        cW = document.body.clientWidth;
        cH = document.body.clientHeight;
        e.stopPropagation();
      }).on("mousemove", function (e) {
        if (thumbX > 0) {
          var nextDragX = e.pageX || e.clientX;
          var nextDragY = e.pageY || e.clientY;
          var $td = $(this).find(".thumbDrag"),
            imageWidth = $image.width(),
            imageHeight = $image.height(),
            thumbImgWidth = $thumbImg.width(),
            thumbImgHeight = $thumbImg.height(),
            left = parseFloat($td.css("left")) + (nextDragX - thumbX),
            top = parseFloat($td.css("top")) + (nextDragY - thumbY),
            w = $td.width(),
            h = $td.height(),
            it,
            il,
            maxL,
            maxT;

          if (isVertical) {
            thumbImgWidth = [thumbImgHeight, thumbImgHeight = thumbImgWidth][0];
            imageWidth = [imageHeight, imageHeight = imageWidth][0];
          }
          it = (o.thumbnailsHeight - thumbImgHeight) / 2,
            il = (o.thumbnailsWidth - thumbImgWidth) / 2,
            maxL = o.thumbnailsWidth - w - il - 2, //减去2像素边框部分
            maxT = o.thumbnailsHeight - h - it - 2;

          if (left < il) left = il;
          else if (left > maxL) left = maxL;

          if (top < it) top = it;
          else if (top > maxT) top = maxT;

          $td.css({
            left: left,
            top: top
          })
          thumbX = nextDragX;
          thumbY = nextDragY;

          if (imageWidth < cW) left = (cW - imageWidth) / 2;
          else left = -imageWidth * (left - il) / thumbImgWidth;

          if (imageHeight < cH) top = (cH - imageHeight) / 2;
          else top = -imageHeight * (top - it) / thumbImgHeight;

          $image.offset({
            left: left,
            top: top
          });
        }
      }).on("mouseup", function (e) {
        thumbX = -1;
      });

      $thumbnails.find(".thumbClose").on("click", function () {
        $thumbnails.hide();
      });

      //显示工具栏
      $gallery.on("mouseover", function (e) {
        $tool.show();

      }).on("mouseenter", function (e) {
        dragX = -1;
      }).on("mouseout", function (e) {
        $tool.hide();
      }).on("mousedown", function (e) {
        dragX = e.pageX || e.clientX;
        dragY = e.pageY || e.clientY;

        cW = document.body.clientWidth;
        cH = document.body.clientHeight;
        e.stopPropagation();
      }).on("mousemove", function (e) {
        if (dragX > 0) {
          var nextDragX = e.pageX || e.clientX;
          var nextDragY = e.pageY || e.clientY;
          var o = $image.offset(),
            left = o.left + (nextDragX - dragX),
            top = o.top + (nextDragY - dragY),
            w = $image.width(),
            h = $image.height();

          if (isVertical) {
            w = [h, h = w][0];
          }
          if (w > cW) {
            if (left > 0) {
              left = 0;
            }
            else if (left < cW - w) {
              left = cW - w;
            }
          } else {
            left = o.left;
          }
          if (h > cH) {
            if (top > 0) {
              top = 0;
            }
            else if (top < cH - h) {
              top = cH - h;
            }
          } else {
            top = o.top;
          }

          $image.offset({
            left: left,
            top: top
          });
          dragX = nextDragX;
          dragY = nextDragY;
          setThumbnails(); //缩略图拖拽点
        }
      }).on("mouseup", function (e) {
        dragX = -1;
      });

      //全屏
      var isMax, preWidth, preHeight, preTop, preLeft;
      $fullscreen.on("click", function () {
        var parentD = window.parent.document,
          windows = $(parentD.getElementById("window")),
          J = $(parentD.getElementById("J_pg"));
        if (!isMax) {
          isMax = true;
          preWidth = document.body.clientWidth;
          preHeight = document.body.clientHeight;
          preTop = windows.css("top");
          preLeft = windows.css("left");
          J.css({
            top: 30,
            left: 0,
            width: parentD.body.clientWidth - 140,
            height: parentD.body.clientHeight - 160,
          });
          parent.$(".window").css({ width: parentD.body.clientWidth - 140 });
          //$(".window").css({width : parentD.body.clientWidth});
          parent.$(".window").css({
            /*left : (document.body.clientWidth - winWidth) /2,
            top : (document.body.clientHeight - winHeight) /2 + 30*/
            top: 0,
            left: 0
          });
          $(".main").show();
          $(".window").show();
          $('.icon_tool-fullscreen').css("background-image", "");
          $('.icon_tool-fullscreen').css("background", "url(icon/small_screen.png) no-repeat");
          $('.icon_tool-fullscreen').css("background-size", "contain");
          $('.oper_fullscreen').attr('title', '缩小全屏');
        } else {
          isMax = false;
          windows.css({
            top: preTop,
            left: preLeft,
            width: preWidth,
            height: preHeight
          })
          J.css({
            // left : (document.body.clientWidth - winWidth) /2,
            // top : (document.body.clientHeight - winHeight) /2 + 30,
            top: 38,
            left: 0,
            width: preWidth,
            height: preHeight
          });
          parent.$(".window").css({ width: preWidth });
          $('.icon_tool-fullscreen').css("background-image", "");
          $('.icon_tool-fullscreen').css("background-image", "url(icon/full_screen.png)");
          $('.oper_fullscreen').attr('title', '查看全屏');

        }
      });

      //放大图片
      $bigger.on("click", function () {
        biggerImage();
      });

      //缩小图片
      $smaller.on("click", function () {
        smallerImage();
      });

      //旋转
      $rotate.on("click", function () {

        var rotateClass = $image.attr("class").match(/(rotate)(\d*)/);

        if (rotateClass) {
          var nextDeg = (rotateClass[2] * 1 + 90) % 360;
          $image.removeClass(rotateClass[0]).addClass("rotate" + nextDeg);
          $thumbImg.removeClass(rotateClass[0]).addClass("rotate" + nextDeg);
          resizeImage(nextDeg);
          resizeThumbImg(nextDeg);
          isVertical = nextDeg == 90 || nextDeg == 270;
        } else {
          $image.addClass("rotate90");
          $thumbImg.addClass("rotate90");
          resizeImage("90");
          resizeThumbImg("90");
          isVertical = true;
        }
      });

      //下载
      $download.on("click", function () {
        var imgUrl = $image.attr("src");
        if (!imgUrl) return;
        alert("没有找到兼容所有浏览器方法，所以暂不实现");
      });

      $(window).on("resize", function () {
        setImagePosition();
      });

      if (document.attachEvent) {
        document.attachEvent("on" + function (e) {
          mouseWheelScroll(e);
        });
      } else if (document.addEventListener) {
        document.addEventListener(MOUSEWHEEL_EVENT, function (e) {
          mouseWheelScroll(e);
        }, false);
      }

      function mouseWheelScroll (e) {
        var _delta = parseInt(e.wheelDelta || -e.detail);
        //向上滚动
        if (_delta > 0) {
          biggerImage();
        }
        //向下滚动
        else {
          smallerImage();
        }
      }

      //键盘左右键
      document.onkeydown = function (e) {

        e = e || window.event;
        if (e.keyCode) {
          if (e.keyCode == 37) { //left
            if (o.activeIndex > 0) o.activeIndex--;
            toggleImage();
          }
          if (e.keyCode == 39) { //right
            if (o.activeIndex < o.imgs.length - 1) o.activeIndex++;
            toggleImage();
          }
        }
      };

      function init () {
        toggleImage();
        //$fullscreen.trigger("click");
        $(o.imgs).each(function (i, img) {
          $(o.template.IMAGE)
            .appendTo($gallery)
            .attr("src", img.url)
            .attr("index", i)
            .css({
              width: img.imgWidth,
              height: img.imgHeight,
              left: (cW - img.imgWidth) / 2,
              top: (cH - img.imgHeight) / 2
            }).on("dblclick", function () {
              app.window.close();
            });
        });
        $image = $(".image[index='" + o.activeIndex + "']", $gallery).addClass("active");
      }

      function toggleImage () {
        console.log(o.imgs);
        console.log(o.imgs[o.activeIndex]);
        imageWidth = o.imgs[o.activeIndex].imgWidth;
        imageHeight = o.imgs[o.activeIndex].imgHeight;
        imgRatio = imageWidth / imageHeight;
        cW = document.body.clientWidth;
        cH = document.body.clientHeight;
        $(".image", $gallery).removeClass("active");
        $image = $(".image[index='" + o.activeIndex + "']", $gallery).addClass("active").css({
          width: imageWidth,
          height: imageHeight
        }).removeClass("rotate0 rotate90 rotate180 rotate270");
        $thumbImg = $thumbnails.find("img").attr("src", o.imgs[o.activeIndex].url);
        $thumbnails.find("img").removeAttr("class").removeAttr("style");
        isVertical = false;
        $thumbnails.hide();
        $prev.removeClass("active");
        $next.removeClass("active");
        setImagePosition();
      }


      function smallerImage () {
        var w = $image.width(),
          h = $image.height(),
          nextW = w * o.ratio,
          nextH = h * o.ratio;
        if (nextW - w < 1) nextW = Math.ceil(nextW);
        var percent = (nextW / imageWidth * 100).toFixed(0);
        if (percent > 90 && percent < 110) {
          percent = 100;
          nextW = imageWidth;
          nextH = imageHeight;
        }
        else if (percent > 1600) {
          percent = 1600;
          nextW = imageWidth * 16;
          nextH = imageHeight * 16;
        }

        $image.width(nextW).height(nextH);
        setImagePosition();
        showPercentTip(percent);
        showThumbnails(nextW, nextH);
      }
      function biggerImage () {
        var w = $image.width(),
          h = $image.height(),
          nextW,
          nextH;
        var percent = (w / o.ratio / imageWidth * 100).toFixed(0);
        if (percent < 5) {
          percent = 5;
          nextW = imageWidth / 20;
          nextH = imageHeight / 20;
        }
        else if (percent > 90 && percent < 110) {
          percent = 100;
          nextW = imageWidth;
          nextH = imageHeight;
        } else if (percent < 3200) {
          nextW = w / o.ratio;
          nextH = h / o.ratio;
        } else {
          percent = 3200;
          return
        }

        $image.width(nextW).height(nextH);
        setImagePosition();
        showPercentTip(percent);
        showThumbnails(nextW, nextH);
      }

      //显示缩略图
      function showThumbnails (width, height) {
        if (isVertical) width = [height, height = width][0];
        if (width > document.body.clientWidth || height > document.body.clientHeight) {
          $thumbnails.show();
          setThumbnails();
        } else {
          $thumbnails.hide();
        }
      }

      //重置图片宽高
      function resizeImage (rotateDeg) {

        var mH = document.body.clientHeight - windowMargin,
          mW = document.body.clientWidth - windowMargin;
        if (rotateDeg == '90' || rotateDeg == '270') {
          mW = [mH, mH = mW][0];
        }

        var width, height;
        width = Math.min(imageWidth, mW);
        height = Math.min(imageHeight, mH);

        if (width / height > imgRatio) {
          width = height * imgRatio;
        } else {
          height = width / imgRatio;
        }

        $image.css({
          width: width,
          height: height
        });
        setImagePosition();
      }

      function resizeThumbImg (rotateDeg) {
        var maxW = o.thumbnailsWidth, maxH = o.thumbnailsHeight;
        if (rotateDeg == '90' || rotateDeg == '270') {
          maxW = [maxH, maxH = maxW][0];
        }
        $thumbImg.css({
          maxWidth: maxW,
          maxHeight: maxH
        });
        $thumbnails.hide();
      }

      //显示百分比提示
      function showPercentTip (percent) {
        $gallery.find(".percentTip").remove();
        $("<div class='percentTip'><span>" + percent + "%</span></div>").appendTo($gallery).fadeOut(1500);
      }

      //设置图片位置
      function setImagePosition () {
        var w = $image.width(),
          h = $image.height(),
          cW = document.body.clientWidth,
          cH = document.body.clientHeight;

        var left = (cW - w) / 2,
          top = (cH - h) / 2;

        $image.css("left", left + "px").css("top", top + "px");
      }

      //设置缩略图拖拽区域
      function setThumbnails () {
        var $img = $thumbnails.find("img"),
          sW = $img.width(),
          sH = $img.height(),
          w = $image.width(),
          h = $image.height(),
          imf = $image.offset(),
          imfl = imf.left,
          imft = imf.top,
          cW = document.body.clientWidth,
          cH = document.body.clientHeight,
          tW,
          tH,
          tl,
          tt;

        if (isVertical) {
          sW = [sH, sH = sW][0];
          w = [h, h = w][0];
        }

        tW = sW / (w / cW);
        if (w < cW) tW = sW;
        tH = sH / (h / cH);
        if (h < cH) tH = sH;
        tl = (o.thumbnailsWidth - sW) / 2 + -imfl / w * sW;
        if (w < cW) tl = (o.thumbnailsWidth - sW) / 2;
        tt = (o.thumbnailsHeight - sH) / 2 + -imft / h * sH;
        if (h < cH) tt = (o.thumbnailsHeight - sH) / 2;
        $thumbnails.find(".thumbDrag").css({
          width: tW,
          height: tH,
          left: tl,
          top: tt
        });
      }

      init();
      return this;
    }
  });

  $.extend({
    //打开图片查看器
    openPhotoGallery: function (obj) {
      console.log("图片放大");
      console.log(obj);
      function isHasImg (src) {
        var img = new Image();
        img.src = src;
        img.onload = function () {
          if (img.width > 0 || img.height > 0) {
            onImgExistNotify(img.src, true, 3);
          }
          else {
            onImgExistNotify(img.src, false, 2);
          }
        }

        img.onerror = function () {
          onImgExistNotify(img.src, false, 1);
        }
      }


      function onImgExistNotify (src, bExist, iPlace) {//图片src是否存在通知
        if (bExist) {
          console.log("图片src=" + src + "存在" + iPlace);
          $("#window").show();
          $(".main").show();
          $(".window").show();
        }
        else {
          console.log("图片src=" + src + "不存在" + iPlace);
          $("#window").hide();
          $(".main").hide();
          $(".window").hide();
          globalUiKit.notify('', '图片不存在', 'success');
          return;
        }
      }
      var $img = $(obj),
        imgUrl = $img[0].src;
      isHasImg(imgUrl);
      if (!imgUrl) return;

      //HTML5提供了一个新属性naturalWidth/naturalHeight可以直接获取图片的原始宽高
      var img = $img[0],
        imgHeight = img.naturalHeight,
        imgWidth = img.naturalWidth,
        ratio = imgWidth / imgHeight,
        wH = 415,
        wW = 615,
        winHeight,
        winWidth,
        maxHeight = document.body.clientHeight - windowMargin * 2,
        maxWidth = document.body.clientWidth - windowMargin;

      winWidth = Math.max(wW, imgWidth);
      winHeight = Math.max(wH, imgHeight);

      console.log(winWidth + "==winWidth=====");
      console.log(winHeight + "==winHeight=====");

      if (winWidth > maxWidth) {
        winWidth = maxWidth;
        winHeight = Math.max(wH, Math.ceil(winWidth / ratio));
        if (imgWidth > winWidth) {
          imgWidth = winWidth;
          imgHeight = Math.ceil(imgWidth / ratio);
        }
      }

      if (winHeight > maxHeight) {
        winHeight = maxHeight;
        winWidth = Math.max(wW, Math.ceil(winHeight * ratio));
        if (imgHeight > winHeight) {
          imgHeight = winHeight;
          imgWidth = Math.ceil(imgHeight * ratio);
        }
      }

      if (winHeight > document.body.clientHeight - 180) {
        winHeight = document.body.clientHeight - 180
      }

      var $gallerys = $(obj).closest(".photoCon"),
        activeIndex = 0,
        imgs = [];
      $gallerys.find(".imgZoom").each(function (i, elem) {
        var url = this.src,
          img = $(this)[0],
          nH = img.naturalHeight,
          nW = img.naturalWidth,
          ratio = nW / nH,
          w = nW,
          h = nH;
        if (url == imgUrl) {
          activeIndex = i;
          w = imgWidth;
          h = imgHeight;
        }
        else {
          if (nW > winWidth) {
            w = winWidth;
            nH = h = Math.ceil(w / ratio);
            if (h > winHeight) {
              nH = h = winHeight;
              w = Math.ceil(h * ratio);
            }
          }
          if (nH > winHeight) {
            h = winHeight;
            w = Math.ceil(h * ratio);
            if (w > winWidth) {
              w = winWidth;
              h = Math.ceil(w / ratio);
            }
          }
        }
        imgs.push({
          url: url,
          imgHeight: h,
          imgWidth: w
        });
      });

      localStorage["photoGalleryImgs"] = JSON.stringify(imgs); //因为此字符串可能是base64字符，appgo无法传
      localStorage["photoGalleryActiveIndex"] = activeIndex;

      $("#J_pg").remove();
      $("<iframe></iframe").appendTo($(".win-body"))
        .attr("id", "J_pg")
        .attr("src", "libs/jquery-photo-gallery/gallery.html")
        .css({
          position: "absolute",
          left: 0,
          top: 30,
          width: winWidth,
          height: winHeight,
          background: 'rgba(177, 178, 179, 0.6)',
          border: '1px solid #6D6D6D',
          'border-radius': '4px'
        });
      var windowTop;
      if ((document.body.clientHeight - winHeight - 140) / 2 > 0) {
        windowTop = (document.body.clientHeight - winHeight - 140) / 2
      } else {
        windowTop = 0;
      }
      $(".window").css({
        left: (document.body.clientWidth - winWidth - 104) / 2,
        top: windowTop,
        // left : 0,
        // top : 0,
        width: winWidth,
        height: winHeight
      });
      $(".main").css({
        // left : (document.body.clientWidth - winWidth) /2,
        // top : (document.body.clientHeight - winHeight) /2
        top: 0,
        left: 0
      });

    },
    //做初始化
    initGallery: function () {

      var activeIndex = localStorage["photoGalleryActiveIndex"],
        imgs = JSON.parse(localStorage["photoGalleryImgs"]);
      console.log(localStorage["photoGalleryImgs"]);
      localStorage.removeItem("photoGalleryActiveIndex");
      localStorage.removeItem("photoGalleryImgs");

      $(".gallery").photoGallery({
        imgs: imgs,
        activeIndex: activeIndex
      });
      var _parent = window.parent || window.top,
        _jg = _parent.document.getElementById("J_pg"),
        closeWin = _parent.document.getElementById("closeWin"),
        windows = _parent.document.getElementById("window"),
        main = _parent.document.getElementById("main");
      $(closeWin).click(function () {
        console.log("关闭");
        /*var _parent =  window.parent || window.top,
            _jg = _parent.document.getElementById("J_pg");*/
        $(_jg).hide();
        $(main).hide();
        $(windows).hide();
      });
    }
  });

})(jQuery);
